<template>
  <div>
    <div>
      <el-form ref="baseForm" class="baseForm" :model="baseForm" :rules="rules" label-width="200px">
        <el-form-item label="商户名称：" prop="name">
          <el-input v-model="baseForm.name" />
        </el-form-item>
        <el-form-item label="商户简称：" prop="abbreviationName">
          <el-input v-model="baseForm.abbreviationName" />
        </el-form-item>
        <!-- <el-form-item label="注册名称：" prop="name">
          <el-input v-model="baseForm.name" />
        </el-form-item> -->
        <el-form-item label="所在城市或地区：" prop="addressCode">
          <el-cascader style="width:100%;" :props="dataTree" v-model="baseForm.addressCode"></el-cascader>
        </el-form-item>
        <el-form-item label="行业类别：" prop="categoryCode">
          <el-cascader style="width:100%;" :props="industryTree" v-model="baseForm.categoryCode"></el-cascader>
        </el-form-item>
        <el-form-item label="商户地址：" prop="addressName">
          <el-input v-model="baseForm.addressName" />
        </el-form-item>
        <el-form-item label="商户联系人：" prop="contactsName">
          <el-input v-model="baseForm.contactsName" />
        </el-form-item>
        <el-form-item label="商户联系人身份证号码：" >
          <el-input v-model="baseForm.contactsCardCode" />
        </el-form-item>
        <el-form-item label="联系人邮箱：" prop="contactsEmaill">
          <el-input v-model="baseForm.contactsEmaill" />
        </el-form-item>
        <el-form-item label="联系人电话：" prop="mobile">
          <el-input v-model="baseForm.mobile" />
        </el-form-item>
        <el-form-item class="btn-group">
          <el-button type="primary" @click="submitForm('baseForm')">确定</el-button>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { sysAjax } from "Ajax";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: {
    Treeselect
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    baseData: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  created() {
    this.dataTree = {
      lazy: true,
      lazyLoad(node,resolve){
        let obj = {
          areaLevel: node.level  ?   node.level + 1  : 1,
          areaParentCode: node.value ? node.value : null
        };
        sysAjax.merchantInfOelectAreaInfo(obj).then(data => {
          for (let i in data) {
              data[i].label = data[i].areaName;
              data[i].value = data[i].areaCode;
              data[i].leaf = node.level >= 2
            }
          resolve(data)
        });
      }
    }
    this.industryTree = {
      lazy: true,
      lazyLoad(node,resolve){
        let obj = {
          businessLevel: node.level  ?   node.level + 1  : 1,
          businessParentCode: node.value ? node.value : null
        };
        sysAjax.merchantInfoSselectBusinessInfo(obj).then(data => {
          for (let i in data) {
              data[i].label = data[i].businessName;
              data[i].value = data[i].businessCode;
              data[i].leaf = node.level >= 2
            }
          resolve(data)
        });
      }
    }
  },
  data() {
    return {
      dataTree: {},
      baseForm: {
      },
      defaultProps: {
        children: "children",
        label: "areaName"
      },
      industryTree: {},
      rules: {
        categoryCode: [{ required: true, message: "请输入", trigger: "blur" }],
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        abbreviationName: [{ required: true, message: "请输入", trigger: "blur" }],
        addressCode: [{ required: true, message: "请输入", trigger: "blur" }],
        addressName: [{ required: true, message: "请输入", trigger: "blur" }],
        contactsName: [{ required: true, message: "请输入", trigger: "blur" }],
        contactsEmaill: [{ required: true, message: "请输入", trigger: "blur" }],
        mobile: [{ required: true, message: "请输入", trigger: "blur" }],
      }
    };
  },
  mounted() {
    this.baseForm = this.baseData;
    this.baseData.addressCode = this.baseData.addressCode.split(',')
    this.baseData.categoryCode = this.baseData.categoryCode.split(',')
  },
  methods: {
    close() {
      this.$emit("update:visible", false);
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.baseForm.addressCode = this.baseForm.addressCode.length ? this.baseForm.addressCode.toString() : ''
          this.baseForm.categoryCode = this.baseForm.categoryCode.length ? this.baseForm.categoryCode.toString() : ''
          sysAjax.updateMerchantInfo(this.baseForm).then(res=>{
            this.$emit("update:visible", false);
          })
        }
      });
    }
  }
};
</script>
<style lang="scss">
.baseForm {
  padding: 30px 80px 30px 10px;
}
.btn-group {
  .el-form-item__content {
    display: flex;
    justify-content: space-between;
  }
}
</style>
